<div>
	<ul class="breadcrumb">
		<li><a href="#" onclick="ajaxContent('/jf/index/content');">主页</a></li>
	</ul>
</div>

<div class="sortable row-fluid">
	<a data-rel="tooltip" class="well span3 top-block" href="#"> <span class="icon32 icon-red icon-user"></span>
		<div onclick="ajaxContent('/jf/user/toUrl?toUrl=/view/operatorMessage.html');">会员总数</div>
		<div>507名</div> <span class="notification">6名</span>
	</a> 
	<a data-rel="tooltip" class="well span3 top-block" href="#"> <span class="icon32 icon-color icon-star-on"></span>
		<div>活跃会员</div>
		<div>228名</div> <span class="notification green">4名</span>
	</a> 
	<a data-rel="tooltip" class="well span3 top-block" href="#"> <span class="icon32 icon-color icon-cart"></span>
		<div>销售额</div>
		<div>13320元</div> <span class="notification yellow">34元</span>
	</a> 
	<a data-rel="tooltip" class="well span3 top-block" href="#"> <span class="icon32 icon-color icon-envelope-closed"></span>
		<div>消息</div>
		<div>25未读消息</div> <span class="notification red">12条</span>
	</a>
</div>

<div class="row-fluid">
	<div class="box span12">
		<div class="box-header well">
			<h2>
				<i class="icon-info-sign"></i> 系统负载
			</h2>
			<div class="box-icon">
				 <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a> <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
			</div>
		</div>
		<div class="box-content">

			<div id="content_pv" style="height:200px;border:1px solid #ccc;padding:10px;"></div> <br/>
			
			<div id="content_cpu" style="height:200px;border:1px solid #ccc;padding:10px;"></div> <br/>
			
			<div id="content_phymemory" style="height:200px;border:1px solid #ccc;padding:10px;"></div> <br/>
			
			<div id="content_jvmmemory" style="height:200px;border:1px solid #ccc;padding:10px;"></div>
			
		</div>
	</div>
</div>

<script type="text/javascript">
    var content_pv = echarts.init(document.getElementById('content_pv'));
    content_pv.setOption({
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['访问量']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ${adates}
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'访问量',
                type:'line',
                stack: '总量',
                itemStyle: {normal: {areaStyle: {
                    color: 'rgba(34, 139, 34, 0.4)'
                }}},
                data:${acounts}
            }
        ]
    });
    
    var content_cpu = echarts.init(document.getElementById('content_cpu'));
    content_cpu.setOption({
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['CPU负载']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                itemStyle: {normal: {areaStyle: {
                    color: 'rgba(34, 139, 34, 0.4)'
                }}},
                data : ${dates}
            }
        ],
        yAxis : [
            {
                type : 'value',
                max : 100
            }
        ],
        series : [
            {
                name:'CPU负载',   
                type:'line',
                stack: '总量',
                itemStyle: {normal: {areaStyle: {
                    color: 'rgba(34, 139, 34, 0.4)'
                }}},
                data:${cpu}
            }
        ]
    });

    var content_phymemory = echarts.init(document.getElementById('content_phymemory'));
    content_phymemory.setOption({
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['物理内存']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ${dates}
            }
        ],
        yAxis : [
            {
                type : 'value',
                max : ${phymemorymax}
            }
        ],
        series : [
            {
            	name:'物理内存',
                type:'line',
                stack: '总量',
                itemStyle: {normal: {areaStyle: {
                    color: 'rgba(34, 139, 34, 0.4)'
                }}},
                data:${phymemoryval}
            }
        ]
    });

    var content_jvmmemory = echarts.init(document.getElementById('content_jvmmemory'));
    content_jvmmemory.setOption({
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['JVM内存']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ${dates}
            }
        ],
        yAxis : [
            {
                type : 'value',
                max : ${jvmmemorymax}
            }
        ],
        series : [
            {
            	name:'JVM内存',
                type:'line',
                stack: '总量',
                itemStyle: {normal: {areaStyle: {
                    color: 'rgba(34, 139, 34, 0.4)'
                }}},
                data:${jvmmemoryval}
            }
        ]
    });
</script>